<template>
  <div class="author-page-top">
    <div class="type">AUTHOR-PROFILE</div>
    <div class="author-top">
      <block class="block">
        <img :src="avatar" alt="author-avatar" title="avatar">
        <div class="name-affiliation">
          <div class="name">
            <h2 :title="`Author Name: ${name[0]}`">{{name[0]}}</h2>
            <span v-for="item in name.slice(1)" :key="item.name" :title="`Author History Name: ${name[0]}`"> {{item}}</span>
          </div>
          <div class="affiliation">
            <a class="regular-link" :href="`/#/affiliation/${affiliation.affiliationId}`" :title="`Author Affiliation: ${affiliation.name}`">{{affiliation.name}}</a>
          </div>
          <div class="affiliation-history" v-if="affiliationHistory">
            <h3>History Affiliation</h3>
            <ul>
              <li v-for="item in affiliationHistory" :key="item" :title="`Author History Affiliation: ${item}`">{{item}}</li>
            </ul>
          </div>
        </div>
      </block>
    </div>
    <div class="author-middle">
      <div class="bar"></div>
      <div class="left">
        <block title="Direction" class="direction block">
          <h4 :title="`Author Study Direction: ${direction}`">{{direction}}</h4>
          <div class="line"></div>
          <a :href="`/#/search?str=${direction}`" class="regular-link">View Search</a>
        </block>
        <block title="Predicted-Direction" class="predicted-direction block">
          <h4 :title="`Author Predicted Direction: ${preDirection.name}`">{{preDirection.name}}</h4>
          <div class="line"></div>
          <a v-if="preDirection !== 'None'" :href="`/#/search?str=${preDirection.name}`" class="regular-link">View Search</a>
        </block>
      </div>
      <div class="right">
        <block title="Most-Cited" class="most-cited block">
          <h4 :title="`Author Most Cited Article: ${mostCitedArticle.articleName}`">{{mostCitedArticle.articleName}}</h4>
          <div class="line"></div>
          <a class="regular-link" :href="`/#/article/${mostCitedArticle.articleId}`" v-if="mostCitedArticle.articleId != 0">View Article</a>
        </block>
        <block title="Most-Co-Author" class="most-co-author block">
          <h4 :title="`Author Most CoAuthor: ${mostCoAuthor.name}`">{{mostCoAuthor.name}}</h4>
          <div class="line"></div>
          <a class="regular-link" :href="`/#/author/${mostCoAuthor.authorId}`" v-if="mostCitedArticle.authorId != 0">View Profile</a>
        </block>
      </div>
      
      
      <div class="bar"></div>
    </div>
  </div>
</template>

<script>
import Block from '@/components/Block/AuthorPageBlock';

export default {
  name: "AuthorPageTop",
  props: {
    msg: {
      name: Array,
      avatar: String,
      affiliation: Object,
      affiliationHistory: Array,
      direction: Object,
      mostCoAuthor: Object,
      mostCitedArticle: Object
    }
  },
  data() {
    return {

    };
  },
  computed: {
    name() {
      return this.msg?.name;
    },
    avatar() {
      return this.msg?.avatar;
    },
    affiliation() {
      return this.msg.affiliation ?? { name: 'None' };
    },
    affiliationHistory() {
      return this.msg?.affiliationHistory;
    },
    direction() {
      return this.msg?.direction?.name ?? 'None';
    },
    preDirection() {
      return this.msg.preDirection ?? 'None';
    },
    mostCoAuthor() {
      return this.msg?.mostCoAuthor ?? {
        name: 'None',
        authorId: 0
      };
    },
    mostCitedArticle() {
      return this.msg?.mostCitedArticle ?? {
        articleName: 'Loading',
        articleId: 0
      };
    }
  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {

  },
  components: {
    Block
  },
};
</script>

<style scoped lang="scss">
.author-page-top {
  font-family: 'Lato', sans-serif;
  display: flex;
  flex-direction: column;

  & > div {
    margin-bottom: 10px;
  }

  .type {
    color: #757575;
    font-size: 12px;
    font-weight: 400;
  }
  .author-top {
    // width: 100%;
    .block {
      flex: 1;
      display: flex;
      padding: 16px;
      img {
        max-width: 134px;
        height: 134px;
        margin-left: 10px;
        margin-right: 26px;
      }

      .name-affiliation {
        margin-top: 12px;

        .name {
          margin-bottom: 15px;

          >h2 {
            display: flex;
            @media screen and (max-width: 400px) {
              font-size: 1.3em;
            }
          }
          >span {
            margin-right: 10px;
          }
        }
        .affiliation {
          a {
            color: #0075c2;
          }
        }
        .affiliation-history {
          display: flex;
          flex-wrap: wrap;
          margin-top: 10px;
          h3 {
            color: rgb(97, 97, 97);
          }
          ul {
            margin-left: 40px;
            transition: ease-in-out .25s;

            @media screen and (max-width: 500px){
              margin-left: 0;
            }
            li {
              color: #333333;
            }
          }
        }
      }
    }
  }

  .author-middle {
    display: flex;
    justify-content: space-between;
    
    @media screen and (max-width: 500px){
      justify-content: center;
    }
    flex-wrap: wrap;

    .block {
      box-shadow: 0 5px 8px rgba(0,0,0,.1);
      height: 178px;
      display: flex;
      flex-direction: column;
    }

    .left, .right {
      display: flex;
      flex: 1;
      justify-content: space-around;
      flex-wrap: wrap;
      > div {
        width: 232px;
        transition: ease-in-out .25s;
        @media screen and (max-width: 1300px){
          margin-bottom: 10px;
        }
        @media screen and (max-width: 500px){
          width: 90%;
          margin: 5px 4%;
        }
      }
    }

    .bar {
      width: 2vw;
      background: #eeeeee63;
      transition: ease-out .2s;
      // border: 1px solid #61616154;
      @media screen and (max-width: 1350px){
        width: 0;
      }
      @media screen and (max-width: 1300px){
        display: none;
      }
    }
    .line {
      margin: 0 10px;
    }
    a {
      flex: 1;
      display: flex;
      align-items: center;
      padding-bottom: 5px;
      justify-content: flex-end;
      margin: 0 10px;
    }

    .most-co-author, .direction, .predicted-direction {
      h4 {
        padding: 16px 16px 16px 16px;
        font-size: 26px;
        color: #cb6d1c;
        height: 54px;
        margin-bottom: 10px;

        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }


    .most-cited {
      h4 {
        padding: 16px;
        font-size: 16px;
        color: #cb6d1c;
        height: 64px;

        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
      }
    }
  }
}
</style>
